<template>
    <div>
        <!--搜索框-->
        <div>
            <el-input
                    placeholder="请输入用户姓名"
                    v-model="name"
                    clearable
                    style="margin-top: 15px;margin-bottom: 15px;margin-left: 2px;width: 300px;"
                    id="user_name_input"
                    suffix-icon="el-icon-search"
                    @keyup.enter.native="loadPost"
            >
            </el-input>
            <el-select v-model="sex" placeholder="请选择性别"
                       style="margin-top: 15px;margin-bottom: 15px;margin-left: 20px;width: 100px;">
                <el-option
                        v-for="item in sexs"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-button type="success" plain style="margin-left: 35px;" id="user_name_but" @click="loadPost">查询
            </el-button>
            <el-button type="success" plain style="margin-left: 15px;" @click="resetParameter">重置信息</el-button>
            <el-button type="success" plain style="margin-left: 15px;" @click="insertUser">新增用户</el-button>
            <el-button type="success" plain style="margin-left: 15px;" @click="download">下载表格信息</el-button>

        </div>
        <el-table :data="tableData"
                  :header-cell-style="{background:'rgba(153,149,147,0.51)'}"
        >
            <el-table-column prop="account" label="用户账号" width="120">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="50" >
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>

            <el-table-column prop="sex" label="性别" width="80">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.sex === '0' ? 'primary' : 'success'"
                            disable-transitions>{{scope.row.sex === '1' ? '男' : '女'}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="userGrade" label="用户角色">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.userGrade === '0' ? 'danger' : (scope.row.userGrade === '1' ? 'primary' : 'success')"
                            disable-transitions>{{scope.row.userGrade === '0' ? '超级管理员' : (scope.row.userGrade === '1' ?
                        '普通用户'
                        : '管理员')}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column prop="phone" label="手机号">
            </el-table-column>

            <el-table-column prop="des" label="备注">
            </el-table-column>

            <el-table-column prop="email" label="邮箱地址">
            </el-table-column>

            <el-table-column prop="age" label="年龄">
            </el-table-column>

            <el-table-column prop="operate" label="操作">
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="mod(scope.row)">修改</el-button>
                    <el-popconfirm title="确定删除吗？" @confirm="delUserById(scope.row.account)" style="margin-left: 5px;">
                        <el-button slot="reference"  type="success" size="mini" >删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                style="margin-top: 50px;">
        </el-pagination>

        <!-- 新增弹出层-->
        <el-dialog
                title="个人信息"
                :visible.sync="centerDialogVisible"
                width="30%"
                center>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="用户名" prop="userName">
                    <el-col :span="19">
                        <el-input v-model="form.userName" placeholder="用户姓名必填"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="密码" prop="passWord">
                    <el-col :span="19">
                        <el-input v-model="form.passWord" placeholder="用户密码必填" type="password"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="确认密码" prop="affirmPassWord">
                    <el-col :span="19">
                        <el-input v-model="form.affirmPassWord" placeholder="确认密码必填" type="password"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form.sex">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="用户角色" prop="userGrade">
                    <el-radio-group v-model="form.userGrade">
                        <el-radio label="0">超级管理员</el-radio>
                        <el-radio label="1">管理员</el-radio>
                        <el-radio label="2">普通用户</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-col :span="19">
                        <el-input v-model="form.age"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="家庭住址" prop="address">
                    <el-col :span="19">
                        <el-input v-model="form.address"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-col :span="19">
                        <el-input v-model="form.phone" placeholder="用户手机号必填"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-col :span="19">
                        <el-input v-model="form.email"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="备注" prop="des">
                    <el-col :span="19">
                        <el-input v-model="form.des"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: "Main",
        data() {
            let checkAge = (rule, value, callback) => {
                if (value > 150) {
                    callback(new Error('年龄过大'));
                } else {
                    callback();
                }
            };
            return {
                //数据
                tableData: [],
                //分页上拉
                pageSizes: [3, 5, 8],
                //起始页
                pageNum: 1,
                //每页条数
                pageSize: 5,
                //总数
                total: 0,
                //输入框 用户名
                name: '',
                //下拉选择
                sexs: [
                    {
                        value: '',
                        label: '全部'
                    }, {
                        value: '0',
                        label: '女'
                    }, {
                        value: '1',
                        label: '男'
                    }],
                //下拉默认展示
                sex: '',
                //新增下拉弹出
                centerDialogVisible: false,
                //表单
                form: {
                    userName: '',
                    sex: '1',
                    age: '',
                    address: '',
                    phone: '',
                    email: '',
                    des: '',
                    passWord: '',
                    userGrade: '1'
                },
                account: '',
                //表单校验数据
                //trigger: ‘change’:数据改变时触发  trigger: ‘blur’:失去焦点时触发,
                rules: {
                    userName: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 5 个字符', trigger: 'blur'}
                    ],
                    passWord: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur'}
                    ],
                    affirmPassWord: [
                        {required: true, message: '请输入确认密码', trigger: 'blur'},
                        {min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur'}
                    ],
                    age: [
                        {required: true, message: '请输入年龄', trigger: 'blur'},
                        {min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur'},
                        {pattern: /^([1-9][0-9]*){1,3}$/, message: '年龄必须为正整数', trigger: 'blur'},
                        {validator: checkAge, trigger: 'blur'},
                    ],
                    email: [
                        {required: false, trigger: 'blur'},
                        {pattern: /^\w+(\w|[.]\w+)+@\w+([.]\w+){1,3}/, message: '邮箱格式错误', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur'},
                        {
                            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                            message: '手机号格式错误',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageNum = 1
                this.pageSize = val
                this.loadPost()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum = val
                this.loadPost()
            },
            loadGet() {
                this.$axios.get(this.$httpUrl + '/JD/testLink').then(
                    res => {
                        console.log(res)
                    }
                )
            },
            loadPost() {
                this.$axios.post(this.$httpUrl + '/test/getUsetPageTest', {
                    userName: this.name,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    sex: this.sex
                }).then(
                    res => res.data).then(res => {
                    if ('00' === res.head.respCode) {
                        this.tableData = res.data.list
                        this.total = res.data.total
                    } else {
                        this.$alert('查询失败');
                    }
                })
            },
            //重置按钮
            resetParameter() {
                this.name = ''
                this.sex = ''
                this.loadPost()
            },
            resetForm(){
                this.$refs.form.resetFields();
            },
            //新增用户
            insertUser() {
                this.centerDialogVisible = true
                //重置表单
                this.resetParameter()
            },
            mod(row) {
                //赋值到表单
                this.centerDialogVisible = true
                this.form.account = row.account
                this.form.userName = row.name
                this.form.phone = row.phone
                this.form.address = row.address
                this.form.passWord = ''
                this.form.des = row.des
                this.form.userGrade = row.userGrade
                this.form.age = row.age
                this.form.sex = row.sex
                this.form.email = row.email
                this.form.des = row.des
                this.form.userGrade = row.userGrade
            },
            add(){
                this.centerDialogVisible = true
                this.$nextTick(()=>{
                    this.resetForm()
                })
            },
            //保存用户
            doSave() {
                this.$axios.post(this.$httpUrl + '/userInfo/register', this.form).then(
                    res => res.data).then(res => {
                    if ('00' === res.head.respStatus) {
                        this.centerDialogVisible = false
                        this.$message('新增成功');
                        this.loadPost()
                        this.resetForm()
                    } else {
                        this.$message('新增失败');
                    }
                })
            },
            //修改用户信息
            doMod() {
                this.$axios.post(this.$httpUrl + '/test/updateUser', this.form).then(res => res.data).then(res => {
                    if ('00' === res.head.respStatus) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.centerDialogVisible = false
                        this.loadPost(this.form)
                        this.resetForm()
                    } else {
                        this.$message({
                            message: '修改失败',
                            type: 'error'
                        });
                    }
                })
            },
            //修改或新增用户
            save() {
                if (this.form.passWord !== this.form.affirmPassWord) {
                    alert('两次输入密码不一致,请重新输入')
                } else {
                    this.$refs.form.validate((valid) => {
                            if (valid) {
                                if (this.form.account) {
                                    this.doMod();
                                } else {
                                    this.doSave();
                                }
                            } else {
                                console.log('error submit!!');
                                return false;
                            }
                        }
                    );

                }
            }
           ,
            delUserById(row) {
                this.$axios.get(this.$httpUrl + '/test/delUser?account=' + row).then(res => res.data).then(res => {
                    if ('00' === res.head.respStatus) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.loadPost()
                    } else {
                        this.$message({
                            message: '删除失败',
                            type: 'error'
                        });
                    }
                })

            },
          download() {
            this.$axios.post(this.$httpUrl + '/test/downloadUser', {
              userName: this.name,
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              sex: this.sex
            }).then(
                res => res.data).then(res => {
              if ('00' === res.head.respCode) {
                this.$alert('下载成功');
              } else {
                this.$alert('下载失败');
              }
            })
          }
        },
        beforeMount() {
            // eslint-disable-next-line no-undef
            // this.loadGet();
            this.loadPost();
        }
    }
</script>

<style scoped>

</style>